<!--
 * @description: 导演视图详情
 * @fileName: DirectorView
 * @author: 17076
 * @date: 2025/3/14-下午1:43
 * @version: V1.0.0
-->

<template>
  <div style="height: 100%">
    <page-header :content="playData['playName']" hidden-edit @back="handleBack">
      <div slot="center" style="width: 300px">
        <el-segmented v-model="activeTabs" :options="tabsList" />
      </div>
      <div slot="right" class="flex-row right-buttons">
        <div v-if="!(playData['createStatus'] === '6')" class="liner-button" @click="handleConfirm">定稿确认</div>
      </div>
    </page-header>
    <director-grid v-if="activeTabs === '1'" :play-data="playData" :lens-data="lensData" />
    <director-list v-else :play-data="playData" :lens-data="lensData" @refresh="fetchData" />
  </div>
</template>

<script>
import DirectorGrid from './components/DirectorGrid.vue'
import DirectorList from './components/DirectorList.vue'
import { queryLensByPlayId } from '@/api/director'
import { selectDetail, updatePlayDescInfo } from '@/api/play'
import { mapActions } from 'vuex'

export default {
  name: 'DirectorView',
  components: { DirectorList, DirectorGrid },
  data() {
    return {
      activeTabs: '1',
      tabsList: [
        { label: '导演视图', value: '1', icon: 'director_tab' },
        { label: '分镜列表', value: '2', icon: 'list_tab' }
      ],
      // 剧本数据
      playData: {},
      // 分镜列表数据
      lensData: []
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.queryPlayInfo()
    }
  },
  methods: {
    ...mapActions({
      changePictureScale: 'lens/changePictureScale'
    }),
    // 查询作品信息
    queryPlayInfo() {
      selectDetail({ id: this.$route.query.id }).then(res => {
        this.playData = res.data
        // 保存当前画面比例
        this.changePictureScale(res.data['pictureScale'])
        // 获取分镜列表
        this.fetchData()
      })
    },
    // 获取分镜列表
    fetchData() {
      queryLensByPlayId({ id: this.playData.id }).then(res => {
        this.lensData = res.data
      })
    },
    // 返回
    handleBack() {
      this.$router.back()
      setTimeout(() => {
        // 清空画面比例
        this.changePictureScale('')
      }, 500)
    },
    // 确认无误，直接确定
    handleConfirm() {
      this.$baseConfirm('作品内容已确认，点击【确认】即可归档。归档后作品将变为只读，无法编辑，确定要继续吗?', '温馨提示', async() => {
        const { code, msg } = await updatePlayDescInfo({ id: this.playData.id, createStatus: '6' })
        code === 200 ? this.$baseMessage.success(msg || '定稿成功') : this.$baseMessage.error(msg || '定稿失败')
        this.$router.back()
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
